<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Div Resizing with Timer Attribute</title>
    <style>
        :host {
            display: block;
        }
        #dynamic-div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transition: width 0.5s, height 0.5s;
        }
    </style>
</head>
<body>
<div style="width: 600px; height: 400px;">
    <resizable-div timer="1000"></resizable-div>
</div>

<script>
    class ResizableDiv extends HTMLElement {
        constructor() {
            super();
            // 创建 Shadow DOM 根节点
            const shadow = this.attachShadow({ mode: 'open' });

            // 创建一个 div 用于动态调整大小
            const div = document.createElement('div');
            div.id = 'dynamic-div';

            // 将 div 添加到 Shadow DOM 中
            shadow.appendChild(div);

            // 初始化宽度和高度
            this.currentWidth = 100;
            this.currentHeight = 100;

            // 初始化定时器
            this.timerId = null;
        }

        static get observedAttributes() {
            return ['timer'];
        }

        attributeChangedCallback(name, oldValue, newValue) {
            if (name === 'timer' && oldValue !== newValue) {
                this.setTimer(newValue);
            }
        }

        connectedCallback() {
            // 获取初始 timer 属性值
            const timerValue = this.getAttribute('timer') || 1000;
            this.setTimer(timerValue);
        }

        disconnectedCallback() {
            // 清除定时器以避免内存泄漏
            clearInterval(this.timerId);
        }

        setTimer(interval) {
            // 清除之前的定时器
            clearInterval(this.timerId);

            // 设置新的定时器
            this.timerId = setInterval(() => {
                this.resizeDiv();
            }, interval);
        }

        resizeDiv() {
            // 随机生成新的宽度和高度
            this.currentWidth += Math.random() * 50 - 25; // 在 -25 到 25 之间变化
            this.currentHeight += Math.random() * 50 - 25; // 在 -25 到 25 之间变化

            // 确保宽度和高度在合理范围内
            this.currentWidth = Math.max(50, Math.min(300, this.currentWidth));
            this.currentHeight = Math.max(50, Math.min(300, this.currentHeight));

            // 更新 div 的宽度和高度
            const dynamicDiv = this.shadowRoot.querySelector('#dynamic-div');
            dynamicDiv.style.width = `${this.currentWidth}px`;
            dynamicDiv.style.height = `${this.currentHeight}px`;
        }
    }

    // 定义新的 HTML 元素
    customElements.define('resizable-div', ResizableDiv);
</script>
</body>
</html>


